<style scoped>
    .card {
        margin: 0 18px;
        -webkit-text-size-adjust: 100%;
    }
   .quick-nav {
        overflow: hidden;
        margin: 20px 0 0 0;
        padding-top: 6px;
    }
    .quick-nav>li {
        float: left;
        width: 50%;
        padding: 3px;
        box-sizing: border-box;
        font-size: 15px;
        list-style: none;
    }
    .quick-nav>li>a {
        background-color: #f6f6f6;
        color: #494949;
        display: block;
        text-align: center;
        line-height: 20px;
        padding: 10px 0;
        border-radius: 2px;
        max-width: 100%;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        word-wrap: normal;
    }
    #recommend-feed {
        margin-right: -18px;
        margin-left: -18px;
        margin-top: 2px;
        min-height: 480px;
        color: #494949;
        -webkit-text-size-adjust: 100%;
    }
</style>

<template>
    <div class="content">
        <scroller :on-infinite="handleStart" loading-layer-color="#ec4949">
          	<div class="container">
                <div class="card">
                    <ul class="quick-nav">
                        <li>
                            <a href="javascript:;">影院热映</a>
                        </li>
                          <li>
                              <a href="javascript:;">最受关注图书</a>
                          </li>
                        <li>
                            <a id="hot-topics" href="javascript:;">豆瓣时间</a>
                        </li>
                        <li>
                            <a href="javascript:;">使用豆瓣App</a>
                        </li>
                    </ul>
                    <div id="recommend-feed">
                        <my-loading v-if="state.loading"></my-loading>
                        <div v-else>
                            <div v-for="(data,a) in lists" key={{a}}>
                                <HomeList :list-data="data"></HomeList>
                            </div>
                        </div>
                    </div>
                </div>
          	</div>
            <svg class="spinner" style="stroke: #05B512;" slot="infinite-spinner" viewBox="0 0 64 64">
                <g stroke-width="7" stroke-linecap="round">
                    <line x1="10" x2="10" y1="27.3836" y2="36.4931">
                        <animate attributeName="y1" dur="750ms" values="16;18;28;18;16;16" repeatCount="indefinite"></animate>
                        <animate attributeName="y2" dur="750ms" values="48;46;36;44;48;48" repeatCount="indefinite"></animate>
                        <animate attributeName="stroke-opacity" dur="750ms" values="1;.4;.5;.8;1;1" repeatCount="indefinite"></animate>
                    </line>
                    <line x1="24" x2="24" y1="18.6164" y2="45.3836">
                        <animate attributeName="y1" dur="750ms" values="16;16;18;28;18;16" repeatCount="indefinite"></animate>
                        <animate attributeName="y2" dur="750ms" values="48;48;46;36;44;48" repeatCount="indefinite"></animate>
                        <animate attributeName="stroke-opacity" dur="750ms" values="1;1;.4;.5;.8;1" repeatCount="indefinite"></animate>
                    </line>
                    <line x1="38" x2="38" y1="16.1233" y2="47.8767">
                        <animate attributeName="y1" dur="750ms" values="18;16;16;18;28;18" repeatCount="indefinite"></animate>
                        <animate attributeName="y2" dur="750ms" values="44;48;48;46;36;44" repeatCount="indefinite"></animate>
                        <animate attributeName="stroke-opacity" dur="750ms" values=".8;1;1;.4;.5;.8" repeatCount="indefinite"></animate>
                    </line>
                    <line x1="52" x2="52" y1="16" y2="48">
                        <animate attributeName="y1" dur="750ms" values="28;18;16;16;18;28" repeatCount="indefinite"></animate>
                        <animate attributeName="y2" dur="750ms" values="36;44;48;48;46;36" repeatCount="indefinite"></animate>
                        <animate attributeName="stroke-opacity" dur="750ms" values=".5;.8;1;1;.4;.5" repeatCount="indefinite"></animate>
                    </line>
                </g>
            </svg>
        </scroller>
    </div>
</template>

<script>
    import { mapState, mapActions } from 'vuex'
    import List from './common/homelist'
    import _ from 'lodash'
    import moment from 'moment'
	export default {
        components: {
            HomeList: List
        },
        data () {
            return {
                lists:[],
                day: 1
            }
        },
        computed: {
            ...mapState({ 
               state: state => state.common 
            })
        },
	 	methods: {
            ...mapActions({
               'loadingInit':'loadingInit'
            }),
            handleStart(done) {
                console.log(9)
                let p = this.getParm()
                this.$http.getJson('/recommend_feed',p).then((res) => {
                    if (res.status == 200 ) {
                        this.loadingInit(false)
                        if (!_.isEmpty(res.data.recommend_feeds)) {
                            this.lists.push(res.data)
                            done()
                        }else{
                            done(true)
                        }
                    }
                });
            },
            getParm() {
                let parm = {}
                parm.next_date = moment().add(this.day,'days').format('Y-M-D')
                this.day = this.day - 1
                return parm
            }
        }
	}
</script>
